<template>
  <!-- 响应式布局 -->
  <div class="layout demo-spin-article">
    <Modal
      v-model="modal_signout"
      title="是否确定退出登陆?"
      @on-cancel="modal_signout = false"
      @on-ok="
        signout(() => {
          this.$router.replace('/login')
        })
      "
    >
      <p>请选择操作</p>
    </Modal>
    <Layout>
      <!-- 侧边栏 -->
      <Sider
        width="200px"
        ref="sider1"
        breakpoint="md"
        collapsible
        :collapsed-width="78"
        v-model="isCollapsed"
        hide-trigger
        :style="{
          position: 'fixed',
          height: '100vh',
          left: 0,
          overflow: 'auto'
        }"
        style="background-color: white; z-index: 4"
      >
        <Menu
          active-name="1-2"
          :theme="theme2"
          width="auto"
          :class="menuitemClasses"
          @on-select="logout"
        >
          <Submenu name="0">
            <template #title>
              <Icon type="ios-home" />
              <p v-if="isShowtitie" style="display: inline-block">主页管理</p>
            </template>
            <MenuItem name="0-1-1" to="/home/hp">信息管理</MenuItem>
          </Submenu>
          <Submenu name="1">
            <template #title>
              <Icon type="ios-paper" />
              <p v-if="isShowtitie" style="display: inline-block">
                编程内容管理
              </p>
            </template>
            <MenuItem name="1-1-1" to="/home/pc_am_new/new">写文章</MenuItem>
            <MenuItem name="1-1-2" to="/home/pc_am_up/new">上传文章</MenuItem>
            <MenuItem name="1-1-3" to="/home/pc_dtm">目录树管理</MenuItem>
          </Submenu>

          <Submenu name="2">
            <template #title>
              <Icon type="ios-paper" />
              <p v-if="isShowtitie" style="display: inline-block">
                其他内容管理
              </p>
            </template>
            <MenuItem name="2-1-1" to="/home/oc_am_new/new">写文章</MenuItem>
            <MenuItem name="2-1-2" to="/home/oc_am_up/new">上传文章</MenuItem>
            <MenuItem name="2-2" to="/home/oc_dtm">目录树管理</MenuItem>
          </Submenu>
          <Submenu name="4">
            <template #title>
              <Icon type="md-link" />

              <p v-if="isShowtitie" style="display: inline-block">友情链接</p>
            </template>
            <MenuItem name="4-1" to="/home/lm">链接管理</MenuItem>
          </Submenu>
          <Submenu name="6">
            <template #title>
              <Icon type="md-bicycle" />
              <p v-if="isShowtitie" style="display: inline-block">我的动态</p>
            </template>
            <MenuItem name="6-1" to="/home/dnm">动态管理</MenuItem>
          </Submenu>
          <Submenu name="5">
            <template #title>
              <Icon type="md-body" />
              <p v-if="isShowtitie" style="display: inline-block">核心素养</p>
            </template>
            <MenuItem name="5-1" to="/home/cl">上传文件</MenuItem>
          </Submenu>
          <Submenu name="8">
            <template #title>
              <Icon type="ios-alarm-outline" />
              <p v-if="isShowtitie" style="display: inline-block">倒数日</p>
            </template>
            <MenuItem name="8-1" to="/home/cd">倒数日管理</MenuItem>
          </Submenu>
          <Submenu name="3">
            <template #title>
              <Icon type="ios-people" />
              <p v-if="isShowtitie" style="display: inline-block">用户管理</p>
            </template>
            <MenuItem name="3-1" to="/home/um">修改密码</MenuItem>
            <MenuItem name="3-2">退出登录</MenuItem>
          </Submenu>
          <Submenu name="7">
            <template #title>
              <Icon type="md-cloud-download" />
              <p v-if="isShowtitie" style="display: inline-block">数据备份</p>
            </template>
            <MenuItem name="7-1" to="/home/ed">数据导出</MenuItem>
          </Submenu>
        </Menu>
        <template #trigger>
          <div></div>
        </template>
      </Sider>
      <!-- 控制侧边栏图标 -->
      <Icon
        v-on:click="collapsedSider"
        :class="rotateIcon"
        type="md-menu"
        size="24"
        style="position: fixed; right: 3px; top: 5px; z-index: 3"
      ></Icon>
      <div style="height: 100vh"></div>
      <!-- 右侧区域 -->
      <!-- 内容 -->
      <Content
        :style="{
          margin: '0px 28px 0 0px',
          marginLeft: compute_marginLeft,
          background: '#fff',
          minHeight: '220px'
        }"
        @click="click_content"
      >
        <div>
          <!-- home中的路由占位符 -->
          <router-view v-slot="{ Component,route }">
            <!-- 写文章的页面肯定要缓存的,不然导致文章丢失 -->
            <!-- include="Article_management" -->
            <keep-alive>
              <component :is="Component" :key="route.path" />
            </keep-alive>
          </router-view>
        </div>
      </Content>
    </Layout>
  </div>
</template>

<script>
import { signout } from '@/api/API_sign_in_out'
import Article_management from '../Programming_content/Article_management.vue'
import { break_width } from '@/mylibs/define'

export default {
  emits: ['click'],
  components: { Article_management },
  data() {
    return {
      theme2: 'light',
      isCollapsed: false,
      isShowtitie: true,
      modal_signout: false,
      signout,
      screenWidth: 500,
      screenHeight: 700
    }
  },
  computed: {
    rotateIcon() {
      return ['menu-icon', this.isCollapsed ? 'rotate-icon' : '']
    },
    menuitemClasses: function () {
      return ['menu-item', this.isCollapsed ? 'collapsed-menu' : '']
    },
    // 控制左侧区域
    compute_marginLeft() {
      var len = ''
      // ＜768px(md),应该为0px
      if (this.isCollapsed || !this.isCollapsed) {
        if (document.body.clientWidth <= break_width) {
          len = '0'
        } else {
          if (this.isCollapsed) {
            this.isShowtitie = false
            len = '78px'
          } else {
            this.isShowtitie = true
            len = '200px'
          }
        }
      }
      return len
    }
  },
  methods: {
    // 退出登录
    logout(name) {
      if (name == '3-2') {
        this.modal_signout = true
      }
    },
    collapsedSider() {
      this.$refs.sider1.toggleCollapse()
    },
    // 屏幕变化
    get_scree_w_h() {
      this.screenWidth = document.body.clientWidth
      this.screenHeight = document.body.clientHeight
    },

    // 定时器
    timer(fun_back) {
      if (fun_back)
        window.setInterval(() => {
          fun_back()
        }, 500)
    },

    click_content() {
      if (this.screenWidth < break_width) this.isCollapsed = true
    }
  },
  created() {
    this.timer(this.get_scree_w_h)
  }
}
</script>

<style lang="less" scoped>
.layout {
  border: 1px solid #d7dde4;
  background: #ffffff;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.ivu-layout {
  background: #ffffff;
}
.layout-header-bar {
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
.rotate-icon {
  transform: rotate(-90deg);
}
.ivu-menu-light {
  height: 100vh !important;
}
// 渐变过度
.MainFade-enter-from,
.MainFade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

.MainFade-enter-to,
.MainFade-leave-from {
  opacity: 1;
}
.MainFade-enter-active {
  transition: all 0.5s ease;
}
.MainFade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
}
// 渐变过度
</style>
